// import { message } from "antd";
import { useEffect, useRef, useState } from "react";
import { WebSocketOptions } from "@/modules/chat/index";
import { User } from "@/modules/login";
//消息类型，下面的代码我用any类型，不建议用any，大家可以自己声明Message类型，为了方便我暂时用any 不用Message

const defaultOptions: Required<WebSocketOptions> = {
  url: "", //连接的长链接
  onOpen: () => {}, //开启连接
  onClose: () => {}, //关闭链接
  onError: () => {}, //异常
  onMessage: () => {}, //消息
  reconnectInterval: 1000, //重连时长设置
  reconnectAttempts: Number.MAX_VALUE, //最大连接范围数
};

const useWebSocket = (
  options: WebSocketOptions
): [WebSocket | undefined, (message: any) => void, string, boolean] => {
  const {
    url,
    onOpen,
    onClose,
    // onError,
    onMessage,
    reconnectInterval,
    reconnectAttempts,
  } = {
    ...defaultOptions,
    ...options,
  };

  const [isConnected, setIsConnected] = useState(false); //是否连接
  const [reconnectCount, setReconnectCount] = useState(0); //用于判断重连
  const [lastMessage, setLastMessage] = useState(""); //最新的消息
  // const [user, setuser] = useState(
  //   JSON.stringify(window.localStorage.getItem("user"))
  // );
  const socketRef = useRef<WebSocket>();
  const reconnectTimerRef = useRef<NodeJS.Timer>();

  const connect = () => {
    //连接函数封装
    setIsConnected(false);

    const socket = new WebSocket(url);
    const user = JSON.parse(window.localStorage.getItem("user")!) as User;
    socket.onopen = () => {
      //开始连接
      console.log("开始连接");
      socket.send(
        JSON.stringify({
          code: 10001,
          nickname: user.nickname,
          userid: user.id,
        })
      );
      socket.send(
        JSON.stringify({
          code: 10003,
          nickname: name,
        })
      );
      setIsConnected(true);
      setReconnectCount(0);
      onOpen();
    };
    socket.onclose = (event) => {
      //连接关闭
      console.error(`连接关闭 ${event.code}`);
      setIsConnected(false);
      onClose(event);
      if (reconnectCount < reconnectAttempts) {
        //用于判断断开连接后重新连接
        reconnectTimerRef.current = setTimeout(() => {
          setReconnectCount((prevCount) => prevCount + 1);
          connect();
        }, reconnectInterval);
      }
    };
    socket.onerror = (event) => {
      //异常问题
      console.error("连接异常:", event);
      onClose(event);
    };
    socket.onmessage = (event) => {
      //接收到消息
      // console.log("接收到新消息");

      // const message: Message = JSON.parse(event.data);
      // console.log(message);
      // const newMsg = JSON.parse(event.data) as Msg;

      // console.dir(newMsg);
      // console.log("新" + newMsg.addNickname);

      // console.log(`接收到消息: ${message}`);
      // console.log(event.data);

      setLastMessage(event.data);
      onMessage(event.data);
    };

    socketRef.current = socket;
  };

  useEffect(() => {
    connect();
    return () => {
      socketRef.current?.close();
      // clearTimeout(reconnectTimerRef.current);
    };
  }, []);

  const sendMessage = (message: any) => {
    //用于发送消息
    if (isConnected && socketRef.current) {
      // console.log(`发送消息: ${JSON.stringify(message)}`);
      socketRef.current.send(JSON.stringify(message));
    } else {
      console.error("发送消息失败");
    }
  };

  //暴露出我们需要的
  return [socketRef.current, sendMessage, lastMessage, isConnected];
};

export default useWebSocket;
